<template>
	<view class="content">
		<view class="doctor-list" v-for="(item,index) in doctorList" :key="index">
			<view class="doctor-name">
				<u-avatar :src="src" size="55"></u-avatar>
				<view style="font-weight: 500;color: #000000;font-size: 31rpx;margin-left: 23rpx;">{{item.docName}}
				</view>
				<view style="margin-left: 15rpx;">{{item.docTitle}}</view>
				<view class="name-but" @click="doctorTime(item)">预约挂号</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="doctor-bom">
				<view>科室名称：<text style="color: #000000;">{{item.deptName}}</text></view>
				<view style="margin-top: 8rpx;">就诊日期：<text style="color: #000000;">{{item.date}}</text></view>
				<view style="margin-top: 8rpx;">接诊时段：<text
						style="color: #000000;">{{item.startTime}}至{{item.endTime}}</text></view>
				<view style="margin-top: 8rpx;">挂号费用：<text style="color: #FF1212;">￥{{item.feeMoney}}</text></view>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" :round="10" @close="show = false">
			<view class="pop-con">
				<view class="pop-title">选择就诊时段</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="user-list">
						<view class="user-item" :class="tabIndex===index?'active':''" v-for="(item,index) in dateList"
							:key="index" @click="selectTab(item,index)">
							<view>{{item.startTime}} - {{item.endTime}}</view>
							<view style="margin-top: 15rpx;">余号：{{item.surplusNumber}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="book-buta">
					<u-button type="primary" text="确定" @click="goPage"></u-button>

				</view>
			</view>
		</u-popup>
		<u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
	</view>
</template>

<script>
	import {
		doctorApi,
		doctortimeApi,
	} from "@/api/user"
	export default {
		data() {
			return {
				loading: true,
				time: '',
				deptNo: '',
				src: '',
				show: false,
				tabIndex: 0,
				doctorList: [],
				dateList: [],
				selectDoctor: {},
			}
		},
		onLoad(option) {
			this.time = option.time
			this.deptNo = option.deptNo
			this.getDoctors()
		},
		methods: {
			async getDoctors() {
				try {
					const res = await doctorApi({
						date: this.time,
						deptNo: this.deptNo
					})
					this.doctorList = res.data
					this.loading = false
				} catch (e) {
					console.log(e);
					this.loading = false
				}

			},
			async doctorTime(item) {
				this.show = true
				this.selectDoctor = item
				const res = await doctortimeApi({
					asRowId: item.asRowId,
					date: item.date,
					docName: item.docName,
					schedualNo: item.schedualNo,
				})
				this.dateList = res.data

			},
			selectTab(item, index) {
				this.tabIndex = index
			},
			goPage() {
				this.show = false
				uni.navigateTo({
					url: '/pages/bookreslut/bookreslut?item=' + encodeURIComponent(JSON.stringify(this
							.selectDoctor)) + '&start=' + this.dateList[this.tabIndex].startTime + '&end=' + this
						.dateList[this.tabIndex].endTime + '&serNum=' + this.dateList[this.tabIndex].serNum
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
		padding-top: 23rpx;
		padding-bottom: calc(23rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.doctor-list {
		margin: 0 auto;
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding: 31rpx;
		box-sizing: border-box;
		margin-bottom: 23rpx;
	}

	.doctor-name {
		display: flex;
		align-items: center;
		margin-bottom: 31rpx;
		color: #999999;
		font-size: 23rpx;
	}

	.name-but {
		margin-left: auto;
		width: 138rpx;
		height: 62rpx;
		background: #05A2FF;
		border-radius: 31rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 23rpx;
	}

	.doctor-bom {
		margin-top: 31rpx;
		color: #999999;
		font-size: 27rpx;
	}

	.pop-con {
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pop-title {
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #000000;
		font-size: 31rpx;
	}

	.scroll-y {
		height: 470rpx;
		width: 688rpx;
		margin-top: 31rpx;
		box-sizing: border-box;
	}

	.user-list {

		margin-right: -31rpx;
		display: flex;
		flex-wrap: wrap;



	}

	.user-item {
		width: 215rpx;
		height: 138rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #000000;
		font-size: 27rpx;
		margin-bottom: 23rpx;
		margin-right: 21rpx;

	}

	.book-buta {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 31rpx;
	}

	.active {
		border: 1px solid #05A2FF;
		background: #EDF8FF;
		color: #05A2FF;
		box-sizing: border-box;
	}
</style>